<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="visible"
      :fullscreen="true"
      :show-close="false"
      class="edit-dialog"
    >
      <template #title>
        <div class="edit-header">
          <el-button type="danger" @click="visible = false" plain size="mini"
            >返回</el-button
          >
          <el-button type="primary" size="mini" @click="save" plain
            >保存</el-button
          >
        </div>
      </template>
      <v-form-designer  ref="formdesigner"></v-form-designer>
    </el-dialog>
    <div class="app-container" v-loading="loading.getPageList">
      <br />
      <!-- <editPanel ref="editPanel"></editPanel> -->
      <previewForm ref="previewForm"></previewForm>
      <editForm ref="editForm"></editForm>
    </div>
  </div>
</template>

<script>
import TableIndex from "@/layout/mixin/TableIndex";
import editPanel from "./components/editPanel";
import previewForm from "./previewForm";
import editForm from "./editForm";
import defaultToVfrom from './designContentConverters/defaultToVfrom'
export default {
  components: {
    editPanel,
    editForm,
    previewForm,
  },
  mixins: [TableIndex],
  data() {
    return {
      moduleName: "dynamicFormDesign",
      form: {},
      visible: false,
      designFramework:'vform',
    };
  },
  computed: {
    id() {
      return {
        id: this.$route.query.id,
        version: Number(this.$route.query.version || 1),
      };
    },
  },
  mounted() {
    this.getDesign(this.id);
  },
  methods: {
    show(value) {
      this.visible = true;
      this.$nextTick(()=>{
        if(this.$refs.formdesigner)
        {
          this.$refs.formdesigner.clearDesigner()
          this.getDesign(value);
        }
      })

    },
    hide() {
      this.visible = false;
    },

    preview() {
      this.$refs.previewForm.show({
        controls: JSON.parse(
          JSON.stringify(this.$refs.editPanel.getControls())
        ),
        value: this.$refs.editPanel.getValue(),
      });
    },
    save() {
      // this.form.designContent = JSON.stringify(
      //   this.$refs.editPanel.getControls()
      // );

      this.form.designContent = JSON.stringify(
        this.$refs.formdesigner.getFormJson()
      );
      this.form.designFramework = this.designFramework;
      this.$refs.editForm.show(this.form);
    },
    getDesign(id) {
      this.form.formDesignId = JSON.parse(JSON.stringify(id));
      let _this = this;
      this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", id)
        .then((res) => {
          if (res && res.designContent)
            // this.$refs.editPanel.setControls(
            //   JSON.parse(res && res.designContent)
            // );
            if(res.designFramework !=this.designFramework)
            {
              let fromJson = defaultToVfrom(res.designContent)
              _this.$refs.formdesigner.setFormJson(fromJson)
            }
            else{
              _this.$refs.formdesigner.setFormJson(res.designContent)
            }
        });
    },
  },
};
</script>

<style lang="scss">
.edit-dialog .main-container .main-header {
  display: none;
}
.edit-dialog .main-container {
  margin-left: 0px !important;
}
.edit-dialog {
  padding: 0 !important;
  .el-dialog__header {
    padding: 0 !important;
    .el-link {
      margin-right: 15px;
    }
    .edit-header {
      text-align: right;
      padding: 10px;
    }
  }
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
